<template>
  <div id="centerRight2">
    <div class="box-item">
      <div class="bg-color-black">
        <div class="d-flex pt-2 pl-2">
                            <span>
                              <icon name="chart-line" class="text-icon"></icon>
                            </span>
          <div class="d-flex">
            <span class="fs-xl text mx-2">基地状态检测（实时）</span>
          </div>
        </div>
        <div class="up">
          <div
              class="bg-color-black item"
              v-for="item in statusList"
              :key="item.title"
          >
            <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
            <div>
              <dv-digital-flop
                  class="dv-dig-flop ml-1 mt-2 pl-3"
                  :config="item.number"
              />
            </div>
          </div>
        </div>
        <div class="box-item-content">
          <a-tabs default-active-key="1" :tabBarStyle="{color: '#FFFFFF'}">
            <a-tab-pane key="1" tab="事件处置" force-render>
              <dv-scroll-board class="dv-scr-board" style="height:375px" :config="config" />
            </a-tab-pane>
            <a-tab-pane key="2" tab="高危作业">
              <dv-scroll-board class="dv-scr-board" style="height:375px" :config="config2" />
            </a-tab-pane>
          </a-tabs>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusList: [
        {
          title: '高危作业(件)',
          number: {
            number: [36],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '安全巡检(次)',
          number: {
            number: [189],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '事件处置(件)',
          number: {
            number: [27],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 26
            }
          }
        },
      ],
      config: {
        header: ['地点', '内容','处理结果'],
        data: [
          ['梦外滩影视主题公园', '云**剧组拍摄后未整理现场', '通知剧组负责人，在1个小时内完成整改'],
          ['梦外滩影视主题公园', '浙A1***3车辆停在消防通道', '通知车辆驶离，停在指定停车场'],
          ['梦外滩影视主题公园', '浙H6***J车辆停在消防通道', '通知车辆驶离，停在指定停车场'],
          ['屏岩洞府', '闽D7***V车辆挡住消防栓', '已通知车辆挪走'],
          ['大智禅寺', '新****剧组未关闭大殿电源', '已关闭，并通知剧组负责人，后续再发生将罚款'],
          ['大智禅寺', '浙G7***W车辆停在消防通道', '通知车辆驶离，停在指定停车场'],
          ['横店明清民居博览城', '少****剧组现场使用明火，未申报', '已通知剧组停止开工，等审批通过后，安全设施符合后再复工'],
          ['广州街香港街', '浙G2***X车辆停在消防通道', '通知车辆驶离，停在指定停车场'],
          ['广州街香港街', '浙A2***D车辆停在消防通道', '通知车辆驶离，停在指定停车场'],
          ['梦幻谷', '沪A3***6车辆挡住消防栓', '已通知车辆挪走'],
          ['华夏文化园', '浙G1***0车辆挡住消防栓', '已通知车辆挪走'],
          ['清明上河图', '千****剧组有落水戏，未设置安全员', '通知剧组负责人进行整改'],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        columnWidth: [120],
        align: ['center']
      },
      config2: {
        header: ['地点', '内容','高危作业'],
        data: [
          ['广州街', '广州街进行火灾，爆破，枪战戏份场景拍摄，涉及火药量超过一定标准', '爆破烟火特效'],
          ['秦王宫', '于秦王宫进行100人以上群演械斗战争拍摄', '械斗'],
          ['红军长征博览城', '于红军长征博览城进行火灾，爆破，枪战戏份场景拍摄，涉及火药量超过一定标准', '爆破烟火特效'],
          ['秦王宫', '于秦王宫楼顶进行高飞高走威亚拍摄', '吊威亚'],
          ['明清宫苑', '于明清宫苑马场进行10人以上群演赛马拍摄', '赛马'],
          ['明清宫苑', '于明清宫苑楼顶进行高飞高走威亚拍摄', '吊威亚'],
          ['梦外滩', '于梦外滩进行火灾，爆破，枪战戏份场景拍摄，涉及火药量超过一定标准', '爆破烟火特效'],
          ['圆明新园', '于圆明新园进行火灾，爆破，枪战戏份场景拍摄，涉及火药量超过一定标准', '爆破烟火特效'],
          ['红军长征博览城', '于红军长征博览城进行10米以上楼高跳楼场景拍摄', '跳楼'],
          ['横店影视城', '于横店影视城进行20人以上群演混战武打动作场景拍摄', '演员武打'],
          ['广州街香港街', '于广州街香港街拍摄点进行30人以上群演混战武打动作场景拍摄', '演员武打'],
          ['明清民居博览城', '于明清民居博览城进行较长时间跳湖，潜水场景拍摄', '跳湖，潜水'],
          ['红军长征博览城', '于红军长征博览城进行较长时间潜水场景拍摄', '跳湖，潜水'],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        columnWidth: [100, 230],
        align: ['center']
      },
    }
  },
  components: { }
}
</script>

<style lang="scss" scoped>
#centerRight2 {
  height: 100%;
}
.up {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item {
    border: 1px solid #ff5722;
    border-radius: 6px;
    padding-top: 8px;
    margin-top: 8px;
    width: 32%;
    height: 100px;
    .dv-dig-flop {
      width: 150px;
      height: 30px;
    }
  }
}
.box-item {
  height: 100%;
  padding: 16px;
  .bg-color-black {
    height: 100%;
    border-radius: 10px;
    .box-item-title {
      position: relative;
      height: 60px;
      line-height: 24px;
      padding: 25px 15px 10px;
      font-size: 14px;
    }

    .box-item-content {
      width:100%;
      height: calc(100% - 100px);
      padding: 15px 0 15px;
      overflow: hidden;

      .ant-tabs {
        height: 100%;
      }
    }
  }
}
</style>
